<template>
	<view>
		<view class="dis-flex">
			<view class="header-title">日期</view>
			<view class="header-title">金额</view>
			<view class="header-title"></view>
		</view>
		<view class="dis-flex" v-for="(item,index) in orderList">
			<view class="header-title">{{item.date}}</view>
			<view class="header-title">{{item.enddate}}</view>
			<view class="header-title" style="color: red;">未签收</view>
			<view class="header-title" style="color: green;">已签收</view>
		</view>
		<view class="bottom-info">
			<u-button type="primary" text="离支付期限还有4天"></u-button>
			<u-button type="primary" text="去支付"></u-button>
		</view>
		<Tabbar :current="2"></Tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderList: [{
					id: 1,
					date: '2023-03-22',
					enddate: '2023-03-23',
					status: 0
				}, {
					id: 2,
					date: '2023-03-22',
					enddate: '2023-03-23',
					status: 1,
				}, {
					id: 3,
					date: '2023-03-22',
					enddate: '2023-03-23',
					status: 1,
				}, {
					id: 4,
					date: '2023-03-22',
					enddate: '2023-03-23',
					status: 1,
				}, {
					id: 5,
					date: '2023-03-22',
					enddate: '2023-03-23',
					status: 0,
				}, {
					id: 6,
					date: '2023-03-22',
					enddate: '2023-03-23',
					status: 0,
				}],
			}
		},
		methods: {

		}
	}
</script>

<style>
	.header-title {
		background: #8681aa;
		padding: 10rpx;
		margin: 4rpx;
	}

	.bottom-info {
		position: fixed;
		bottom: 30rpx;
		height: 120rpx;
		background: #fff;
		width: 100%;
		display: flex;
		align-items: center;
	}
</style>